<style scoped>
  .login_container {
    background-color: #2b4b6b;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: relative;
  }

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eeeeee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #dddddd;
    margin: 0 auto;
    transform: translateY(-50%);
    background-color: #fff;
  }

  .avatar_box img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eeeeee;
  }

  .form-box {
    position: relative;
    width: 87%;
    margin: auto;
    top: -50px;
  }
</style>

<template>
  <div class="login_container">
    <dvi class="login_box">
      <!-- 头像去 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="logo" />
      </div>
      <!-- 登陆表单区 -->
      <form action="#" class="form-box">
        <el-input label="用户名" name="username" id="" v-model="loginForm.username"></el-input>

        <!-- label="密&emsp;码" -->
        <el-input label="密  码" name="password" type="password" v-model="loginForm.password"></el-input>
        <el-input name="password" type="hidden"></el-input>

        <el-input label="" disabled="true" placeholder="这是禁用~~"></el-input>

        <div class="text-align">
          <el-button @click="login" info="登陆" type="button" colorType="primary"></el-button>
          <el-button info="重置" type="reset" colorType="danger" id="123456"></el-button>
        </div>
      </form>
    </dvi>
  </div>
</template>

<script>
  import elInput from "../components/utils/input.vue";
  import elButton from "../components/utils/button.vue";
  import $ from "jquery";
  export default {
    name: "Login",
    data() {
      return {
        visible: false,
        loginForm: {
          username: "admin",
          password: "123456",
        },
      };
    },
    mounted() {
      console.clear();
    },
    methods: {
      async login() {
        //  this.$message('这是一条消息提示');
        // this.$message({
        //   message: "内容可以是",
        // });
        let res = await this.$http.post("login", this.loginForm);
        console.log("res", res);
        if (res.data.meta.status !== 200) {
          this.$message.error("发生错误：" + res.data.meta.msg);
        } else {
          this.$message.success(res.data.meta.msg);
          // 保存token
          window.sessionStorage.setItem("token", res.data.data.token);
          // 跳转路劲
          this.$router.push("/home");
        }
      },
    },
    components: {
      elInput,
      elButton,
    },
  };
</script>